import React from 'react'
import PropTypes from 'prop-types'
import { Form, Select, Input, Button,Icon,Row,Col } from 'antd';
import styles from './List.less'
import classnames from 'classnames'
import { AnimTableBody } from '../../components'
import { DropOption } from '../../components'
const FormItem = Form.Item;
const Option = Select.Option;
const formItemLayout = {
  labelCol: {
    span: 24,
		
  },
  wrapperCol: {
		xs:12,
		sm:16,
		md:12,
		lg:8,
		xl:5
  },
	style:{
		paddingLeft:10
	}
}


class role extends React.Component {
	state = {
    confirmDirty: false,
    autoCompleteResult: [],
		

  }
	handleConfirmBlur = (e) => {
    const value = e.target.value;
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  }
	checkPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && value !== form.getFieldValue('password')) {
      callback('两次输入的密码不一致!');
    } else {
      callback();
    }
  }
	phoneVal =(rule, value, callback)=>{
		const form = this.props.form;
		const num =/^[0-9]*$/
		if(!num.test(value)){
			callback('输入正确的电话号码!');
		}else{
			callback();
		}
	}
	checkConfirm = (rule, value, callback) => {
    const form = this.props.form;
    if (value && this.state.confirmDirty) {
      form.validateFields(['confirm'], { force: true });
    }
    callback();
  }
  render() {
  	const { onAdd, addroleId,roleTitle, allsecele,onClose,allrole,currentItem,modalType} = this.props
  	const { getFieldDecorator } = this.props.form;
		let SelecttValue = []
		SelecttValue.push(JSON.stringify(allsecele.id))
  	const handleCreate =(e)=>{
			let perId = []
			for(let i=0;i<SelecttValue.length;i++){
				perId.push(JSON.parse(SelecttValue[i]))
			}
			const form = this.props.form;
			e.preventDefault();
	    this.props.form.validateFields((err, values) => {
				console.log("values1",values)
	      if (!err) {
					const data= {
						roleId:	allsecele.id,
						admin: values,
						perId:perId
					}
	      	onAdd(data)
	      }
				localStorage.setItem("editNot",'true')
	    });
		}

		const children = [];
		for (let i = 0; i < allrole.length; i++) {
			children.push(<Option key={allrole[i].id}>{allrole[i].name}</Option>);
		}
		const handleChange =(e)=>{
			SelecttValue = e
			localStorage.setItem("editNot",'false')
		}
		const onChangeForm =(e)=>{
			localStorage.setItem("editNot",'false')
		}
    return (
			<div>
			<div className={styles.filterTop}>
        <div className={styles.title}>
					<span style={{marginRight:20}}>{allsecele.name}</span>
						<Button type="primary"onClick={handleCreate}>
							保存
						</Button>
				</div>
        <div className={styles.Searchright} >
          <Icon type="close" onClick={onClose} style={{ fontSize: 24, color: '#000',cursor: 'pointer',fontWeight:'bold' }} />
        </div>
      </div>
      <div style={{marginTop:40}}>
	       <Form onSubmit={handleCreate} onChange={onChangeForm} ref='Submit'>
		        <FormItem
		          label="用户名"
		          {...formItemLayout}
		        >
		          {getFieldDecorator('name', {
		            rules: [{ required: true, message: '请输入姓名!' }],
		          })(
		            <Input />
		          )}
		        </FormItem>
						<FormItem
		          label="昵称"
		          {...formItemLayout}
		        >
		          {getFieldDecorator('realName', {
		            rules: [{ required: true, message: '请输入用户名!' }],
		          })(
		            <Input />
		          )}
		        </FormItem>
						<FormItem
						style={{dispaly:'none'}}
		          label="密码"
		          {...formItemLayout}
		        >
		          {getFieldDecorator('password', {
		            rules: [
									{ required: true, message: '请输入密码!' },
									{ validator: this.checkConfirm,}
									],
		          })(
		            <Input />
		          )}
		        </FormItem>
						<FormItem
		          label="确认密码"
		          {...formItemLayout}
		        >
		          {getFieldDecorator('confirm', {
		            rules: [
									{ required: true, message: '请输入密码!' },
									{ validator: this.checkPassword,}
								],
		          })(
		            <Input onBlur={this.handleConfirmBlur} />
		          )}
		        </FormItem>
						<FormItem
		          label="邮件"
		          {...formItemLayout}
		        >
		          {getFieldDecorator('email', {
		            rules: [
									{type: 'email', message: '请输入有效的电子邮件!'},
									{ required: true, message: '请输入邮件!' }
									],
		          })(
		            <Input />
		          )}
		        </FormItem>
						<FormItem
		          label="电话号码"
		          {...formItemLayout}
		        >
		          {getFieldDecorator('phone', {
								rules: [
									{ required: true, message: '请输入号码!' },
									{ validator: this.phoneVal,}
									],
		          })(
		            <Input />
		          )}
		        </FormItem>
		     </Form>
				 <Row>
					 <Col span={24} style={{marginLeft:10}}>授权</Col>
					 <Col xs={12} sm={16} md={12} lg={8} xl={5} style={{marginLeft:10,marginTop:5}}>
					 	<Select
								mode={false}
								multiple={false}
								style={{ width: '100%' }}
								placeholder="选择权限"
								defaultValue ={JSON.stringify(allsecele.id)}
								onChange={handleChange}
							>
								{children}
							</Select>
					 </Col>
				 </Row>
      </div>
      </div>
    );
  }
}


export default Form.create()(role)
